<template>
  <div class="ant-layout">
    <div class="ant-layout">
      <div class="future_wrap">
        <div class="future_handle_area">
          <div style="float: right;">
            {{countIndex}}
            <div class="future_order_des"><span><em style="background-color: rgb(112, 198, 175);"></em>在住</span><span><em
                  style="background-color: rgb(96, 162, 255);"></em>预订</span><span><em style="background-color: rgb(164, 164, 164);"></em>维修</span></div>
          </div>
          <div class="certain-category-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
            style="margin-right: 6px;">
            <el-form :inline="true">
              <el-form-item>
                <el-autocomplete class="inline-input" v-model="searchKey" :fetch-suggestions="querySearch" placeholder="房型、房号"
                  @select="handleSelect" @change="keyChange"></el-autocomplete>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="isCountNow" @change="getAllFloorRoom()">不包含当日预离房</el-checkbox>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="future_room_status" style="margin-left:20px" v-loading="loading">
          <div class="left_wrap">
            <div class="time_choice">
              <div class="ant-row">
                <div class="ant-col-18">
                  <el-date-picker style="width:80%" v-model="time" size="small" type="date" placeholder="选择日期" align="center"
                    :editable="editable" :clearable="editable" @change="getAllFloorRoom()">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div class="left_table_wrap" id="left_table_wrap" style="padding-bottom: 6px;" @scroll="scrollRooms()"
              @mouseenter="setType(1)" ref="roomsTable">
              <div id="fixed_room_type" style="position: fixed;/* top: 225px; */left: 18px;width: 93px;z-index: 1;text-align: center;background-color: rgb(255, 255, 255);padding: 5px 0px;margin-left:1px">{{allFloorRoom[0].hotelRoomEntity.name}}({{allFloorRoom[0].entityList.length}})</div>
              <table>
                <tbody>
                  <template v-for="item in allFloorRoom">
                    <tr :key="item.hotelRoomEntity.id" class="l-test-tr1">
                      <td :data-type="item.hotelRoomEntity.name" :rowspan="item.entityList.length" :class="selectedType==item.hotelRoomEntity.name?'selected':''">
                        <div :data-position="item.hotelRoomEntity.name" style="position: absolute; top: 0px; left: 0px; right: 0px; text-align: center; padding: 5px 0px;">{{item.hotelRoomEntity.name}}({{item.entityList.length}})</div>
                      </td>
                      <td :data-room="item.entityList[0].roomSign+item.entityList[0].roomNum" :class="hoverRoom==(item.entityList[0].roomSign+item.entityList[0].roomNum)?'bg_hover':''+
                        ''+selectedType==(item.entityList[0].roomSign+item.entityList[0].roomNum)?' selected':''"
                        @mouseenter="activeRoom(item.entityList[0].id,$event)" @mouseleave="activeRoom(0)">{{item.entityList[0].roomSign+item.entityList[0].roomNum}}

                        <div class="futrue_room_status futrue_dirty" v-show="item.entityList[0].type==1||item.entityList[0].type==3">
                          <i class="iconfont" title="脏房">脏</i></div>
                        <div v-if="item.entityList[0].lockType==0" class="futrue_room_status futrue_locked"><i class="el-icon-link"
                            title="锁"></i></div>
                        <div class="futrue_room_status futrue_repair" v-show="item.entityList[0].type==4">
                          <i class="el-icon-s-open" title="修"></i>
                        </div>
                        <div class="empty_room_operate" v-show="activeRoomId==item.entityList[0].id">
                          <div v-if="!(item.entityList[0].type==1||item.entityList[0].type==3)&&item.entityList[0].lockType==1&&item.entityList[0].type!=4"
                            @click="setClear('zang',item.entityList[0].id,item.entityList[0].type)">置脏</div>
                          <div v-if="(item.entityList[0].type==1||item.entityList[0].type==3)&&item.entityList[0].lockType==1&&item.entityList[0].type!=4"
                            @click="setClear('ganjing',item.entityList[0].id,item.entityList[0].type)">置干净</div>
                          <div v-if="item.entityList[0].lockType==1&&item.entityList[0].type!=4" @click="open(item.entityList[0].id,item.entityList[0].type)">锁房</div>
                          <div v-if="item.entityList[0].lockType==1&&item.entityList[0].type!=4" @click="weixiuBtn(item.entityList[0])">置维修</div>
                          <div v-if="item.entityList[0].lockType==0&&item.entityList[0].type!=4" @click="unlock(item.entityList[0].id,item.entityList[0].type)">解锁</div>
                          <div v-if="item.entityList[0].type==4" @click="setClear('weixiu',item.entityList[0].id,item.entityList[0].type)">完成维修</div>
                        </div>
                      </td>
                    </tr>

                    <tr v-for="item2 in item.entityList.slice(1)" :key="item2.id">
                      <td :data-room="item2.roomSign+item2.roomNum" :class="hoverRoom==(item2.roomSign+item2.roomNum)?'bg_hover':''+
                        ''+selectedType==(item2.roomSign+item2.roomNum)?' selected':''"
                        @mouseenter="activeRoom(item2.id,$event)" @mouseleave="activeRoom(0)">{{item2.roomSign+item2.roomNum}}
                        <div class="futrue_room_status futrue_dirty" v-show="item2.type==1||item2.type==3">
                          <i class="iconfont" title="脏房">脏</i></div>
                        <div v-if="item2.lockType==0" class="futrue_room_status futrue_locked"><i class="el-icon-link"
                            title="锁"></i></div>
                        <div class="futrue_room_status futrue_repair" v-show="item2.type==4">
                          <i class="el-icon-s-open" title="修"></i>
                        </div>
                        <div class="empty_room_operate" v-show="activeRoomId==item2.id">
                          <div v-if="!(item2.type==1||item2.type==3)&&item2.lockType==1&&item2.type!=4" @click="setClear('zang',item2.id,item2.type)">置脏</div>
                          <div v-if="(item2.type==1||item2.type==3)&&item2.lockType==1&&item2.type!=4" @click="setClear('ganjing',item2.id,item2.type)">置干净</div>
                          <div v-if="item2.lockType==1&&item2.type!=4" @click="open(item2.id,item2.type)">锁房</div>
                          <div v-if="item2.lockType==1&&item2.type!=4" @click="weixiuBtn(item2)">置维修</div>
                          <div v-if="item2.lockType==0" @click="unlock(item2.id,item2.type)">解锁</div>
                          <div v-if="item2.type==4" @click="setClear('weixiu',item2.id,item2.type)">完成维修</div>
                        </div>
                      </td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
          <div class="right_wrap">
            <div class="top_table_wrap" id="top_table_wrap" ref="topTableWrap" data-step="futureDate" style="overflow-y: scroll;">
              <table>
                <tbody>
                  <tr>
                    <td v-for="item in times" :key="item.time1" :data-date="item.time1" :class="hoverTd==item.time1?'bg_hover':''"
                      :style="'background-color: '+item.bg+';'">
                      <div :style="'font-size: 14px; line-height: 1.5;'+item.color">{{item.time2}}</div>
                      <div style="line-height: 1.5;">
                        可售{{availableDaysMap.get(item.count)}}间
                      </div>
                      <a v-if="allocatedMap.get(item.count) > 0" href="javascript:;" @click="toGULilist(item)" style="line-height: 1.5; color: rgb(24, 144, 255);">
                        待分配{{allocatedMap.get(item.count)}}间
                      </a>
                    </td>

                  </tr>
                </tbody>
              </table>
            </div>
            <div class="right_table_wrap" id="right_table_wrap" ref="rightWrap" @scroll="scrollRight($event)" @mouseenter="setType(2)">
              <table>
                <tbody>
                  <template v-for="item in allFloorRoom">
                    <tr v-for="item2 in item.entityList" :key="item2.id">
                      <td v-show="item2.checked" v-for="(item4,index) in times" :key="item4.time1">
                        <div class="empty_room" :data-room="item2.roomSign+item2.roomNum" :data-date="item4.time1"
                          style="z-index: 2;" @mouseenter="bg_hover($event,item2.roomSign+item2.roomNum,item4.time1)"
                          @mouseleave="bg_hover_out($event)">
                          <div class="empty_room_operate right_bottom" style="display:none" v-if="item4.time1>=NOW">
                            <div v-if="NOW==item4.time1" @click="ruzhu([item2])">入住</div>
                            <div @click="reserve([item2])">普通预订</div>
                          </div>
                        </div>
                        <template v-for="item3 in peopleRoom">
                          <div class="room_order" :style="''+(backgroundMap[item3.singleEntity.type])+
                            ';left:'+startTimeWidth(item3.peopleEntity.arrivalsTime,item3.peopleEntity.predissociationTime)+
                            'px;  z-index: 3;width:'+timeWidth(item3.peopleEntity.arrivalsTime,item3.peopleEntity.predissociationTime)+
                            'px;max-width:'+(maxWidth-startTimeWidth(item3.peopleEntity.arrivalsTime,item3.peopleEntity.predissociationTime))+'px;'
                            "
                            v-if="item3.peopleEntity.floorRoomId==item2.id&&index==0&&item3.peopleEntity.sysNo!='4'"
                            :key="item3.id" @mouseenter="activePeople(item3.peopleEntity.id,$event)" @mouseleave="activePeople(0,$event)">
                            <div class="futrue_order ">
                              <div><span>{{item3.peopleEntity.name}}</span><span></span></div>
                              <div>
                                <!-- <i class="iconfont icon-wuya red_bg1 icon_circle icon_circle_sanke"></i> -->

                                <div class="icon_circle icon_circle_status icon_circle_sanke" v-if="item3.singleEntity.checkinType == 1">
                                  <i class="iconfont">钟点房</i>
                                </div>
                                <i class="iconfont red_bg1 icon_circle" v-if="item3.peopleEntity.payment - item3.peopleEntity.consumption < 0">欠</i>
                                <div class="icon_circle ">
                                  <i class="iconfont" v-if="item3.singleEntity.sourceType == 0">散</i>
                                  <i class="iconfont" v-if="item3.singleEntity.sourceType == 1">会</i>
                                  <i class="iconfont" v-if="item3.singleEntity.sourceType == 2">协</i>
                                  <i class="iconfont" v-if="item3.singleEntity.sourceType == 3">中</i>
                                </div>
                                <div class="icon_circle">
                                  <!-- 入住类型（0全天1时租2自用3免费） -->
                                  <i class="iconfont" v-if="item3.singleEntity.checkinType == 0">全</i>
                                  <i class="iconfont" v-if="item3.singleEntity.checkinType == 1">时</i>
                                  <i class="iconfont" v-if="item3.singleEntity.checkinType == 2">自</i>
                                  <i class="iconfont" v-if="item3.singleEntity.checkinType == 3">免</i>
                                </div>
                                <!-- <div
                                  class="icon_circle icon_circle_status"
                                  v-if="item3.singleEntity.reserveState == 1"
                                >
                                <i class="iconfont">{{ item3.singleEntity.arrivalsTime.slice(8, item3.singleEntity.arrivalsTime.length - 6) }}日抵</i>
                                </div> -->
                                <div class="icon_circle icon_circle_status" v-if="item3.singleEntity.checkinType == 0">
                                  <i class="iconfont" style="padding: 3px;line-height: 18px;">{{ item3.singleEntity.predissociationTime.slice(8, item3.singleEntity.predissociationTime.length - 6) }}日离</i>
                                  <!-- <i class="iconfont">{{ item.pepredissociationTime }}日离</i> -->
                                </div>

                              </div>
                              <div class="order_operate" v-show="activePeopleId==item3.peopleEntity.id" :style="item3.singleEntity.type == 1 ? 'height:316px':'height:278px'">
                                <div class="future_order_info">
                                  <div><span class="name">{{item3.peopleEntity.name}}</span><span class="mobile"></span>

                                    <div class="future_order_icon">
                                      <i class="iconfont red_bg1 icon_circle" v-if="item3.peopleEntity.payment - item3.peopleEntity.consumption < 0">欠</i>
                                      <i class="iconfont icon_circle " v-if="item3.singleEntity.sourceType == 0">散</i>
                                      <i class="iconfont icon_circle " v-if="item3.singleEntity.sourceType == 1">会</i>
                                      <i class="iconfont icon_circle " v-if="item3.singleEntity.sourceType == 2">协</i>
                                      <i class="iconfont icon_circle " v-if="item3.singleEntity.sourceType == 3">中</i>
                                    </div>
                                  </div>
                                  <div class="ant-divider ant-divider-horizontal"></div>
                                  <div>{{item3.singleEntity.type==1?'抵达时间':'预抵时间'}}：{{item3.peopleEntity.arrivalsTime}}</div>
                                  <div>预离时间：{{item3.peopleEntity.predissociationTime}} (共{{item3.singleEntity.roomsDays}}晚)</div>
                                  <div>订单号：{{item3.singleEntity.sysNo}}</div>
                                  <!-- <div>渠道：{{sourceTypeMaps[item3.singleEntity.sourceType]}}</div> -->
                                  <div class="ant-divider ant-divider-horizontal"></div>
                                  <div>付款：{{item3.peopleEntity.payment}}</div>
                                  <div>预授权：{{item3.peopleEntity.xinyongCardMoney ?item3.peopleEntity.xinyongCardMoney : 0}}</div>
                                  <div class="ant-divider ant-divider-horizontal"></div>
                                  <div><span style="float: left;">备注：</span><span style="display: block; margin-left: 42px; line-height: 1.5; padding-top: 5px;">
                                      {{item3.singleEntity.remarks}}
                                    </span></div>
                                </div>
                                <div class="occupy_operate_wrap">
                                  <div class="ant-row-flex" v-if="item3.singleEntity.type == 1">
                                    <div class="ant-col-8"><span class="operate_btn" @click="toAccounting(item3.singleEntity.id,'1')">详
                                        单</span></div>
                                    <div class="ant-col-8"><span class="operate_btn" @click="ruzhangHandle(item3)">入 账</span></div>
                                    <div class="ant-col-8"><span class="operate_btn" @click="closingRoomBtn(item3)">结 账</span></div>
                                    <div class="ant-col-8"><span class="operate_btn" @click="xuzhuTiqian(item3)">续 住</span></div>
                                    <div class="ant-col-8"><span class="operate_btn" @click="liveTogetherBtn(item3)">同 住</span></div>
                                    <!-- <div class="ant-col-8"><span class="operate_btn">预制卡</span></div>
                                    <div class="ant-col-8"><span class="operate_btn">打 印</span></div> -->
                                  </div>
                                  <div class="ant-row-flex" v-else>
                                    <div class="ant-col-8"><span class="operate_btn" @click="toAccounting(item3.singleEntity.id,'1')">预订单</span></div>
                                  </div>
                                </div>
                              </div>
                            </div>

                          </div>
                          <!-- 维修 -->
                          <div class="room_order" :style="''+(backgroundMap[item3.singleEntity.type])+
                            ';left:'+startTimeWidth(item3.singleEntity.arrivalsTime,item3.singleEntity.predissociationTime)+
                            'px;  z-index: 3;width:'+timeWidth(item3.singleEntity.arrivalsTime,item3.singleEntity.predissociationTime)+
                            'px;max-width:'+(maxWidth-startTimeWidth(item3.singleEntity.arrivalsTime,item3.singleEntity.predissociationTime))+'px;'
                            "
                            v-if="item3.peopleEntity.floorRoomId==item2.id&&index==0&&item3.peopleEntity.sysNo=='4'"
                            :key="item3.id" @mouseenter="activePeople(item3.peopleEntity.id,$event)" @mouseleave="activePeople(0,$event)">
                            <div class="futrue_order ">
                              <div><span>{{item3.peopleEntity.name}}</span><span></span></div>
                              <div class="order_operate" v-show="activePeopleId==item3.peopleEntity.id" style="height:120px">
                                <div class="future_order_info">
                                  <div>开始时间：{{item3.singleEntity.arrivalsTime}}</div>
                                  <div>完成时间：{{item3.singleEntity.predissociationTime}}</div>
                                  <div class="ant-divider ant-divider-horizontal"></div>
                                  <div><span style="float: left;">维修原因：</span><span style="display: block; margin-left: 42px; line-height: 1.5; padding-top: 5px;">
                                      {{item3.peopleEntity.name}}
                                    </span></div>
                                </div>
                                <!-- <div class="occupy_operate_wrap">
                                  <div class="ant-row-flex">
                                    <div class="ant-col-8"><span class="operate_btn"> 预订详单 </span></div>
                                    <div class="ant-col-8"><span class="operate_btn">预制卡</span></div>
                                    <div class="ant-col-8"><span class="operate_btn">打 印</span></div>
                                  </div>
                                </div> -->
                              </div>
                            </div>

                          </div>
                        </template>
                      </td>
                      <!-- 不显示时 占位 -->
                      <td v-show="!item2.checked"></td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <addPeople v-if="addPeopleVisible" ref="addPeople2" @refreClosing="getDataList" @refreshDataList="getDataList()"></addPeople>
    <xuzhuTiqian v-if="xuzhuTiqianVisible" ref="xuzhuTiqian" @refreClosing="getDataList" @refreshDataList="getDataList()"></xuzhuTiqian>
    <closingRoom v-if="closingRoomVisible" ref="closingRoom" @refreClosing="getDataList" @refreshDataList="getDataList()"></closingRoom>
    <ruzhang v-if="ruzhangVisible" ref="ruzhang" @refreshDataList="getDataList()"></ruzhang>
    <fangtaiWeixiu v-if="fangtaiWeixiuVisible" ref="fangtaiWeixiu" @refreshDataList="getAllFloorRoom"></fangtaiWeixiu>
    <floorroomruzhu
      v-if="floorroomruzhuVisible"
      ref="floorroomruzhu"
      @refreshDataList="getDataList"
      :max="max"
    ></floorroomruzhu>
  </div>

</template>
<script>
  import Moment from 'moment'
  import $ from 'jquery'
  import floorroomruzhu from "../thotelfloor/floorroomruzhu";
  import closingRoom from '../floorRoomSign/closingRoom';
  import xuzhuTiqian from '../floorRoomSign/xuzhuTiqian';
  import addPeople from '../floorRoomSign/addPeople';
  import fangtaiWeixiu from '../thotelfloor/fangtai-weixiu';
  Moment.locale('zh-cn', {
    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
    monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
    weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
    weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
    weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
    longDateFormat: {
      LT: 'HH:mm',
      LTS: 'HH:mm:ss',
      L: 'YYYY-MM-DD',
      LL: 'YYYY年MM月DD日',
      LLL: 'YYYY年MM月DD日Ah点mm分',
      LLLL: 'YYYY年MM月DD日ddddAh点mm分',
      l: 'YYYY-M-D',
      ll: 'YYYY年M月D日',
      lll: 'YYYY年M月D日 HH:mm',
      llll: 'YYYY年M月D日dddd HH:mm'
    },
    meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
    meridiemHour: function(hour, meridiem) {
      if (hour === 12) {
        hour = 0;
      }
      if (meridiem === '凌晨' || meridiem === '早上' ||
        meridiem === '上午') {
        return hour;
      } else if (meridiem === '下午' || meridiem === '晚上') {
        return hour + 12;
      } else {
        // '中午'
        return hour >= 11 ? hour : hour + 12;
      }
    },
    meridiem: function(hour, minute, isLower) {
      const hm = hour * 100 + minute;
      if (hm < 600) {
        return '凌晨';
      } else if (hm < 900) {
        return '早上';
      } else if (hm < 1130) {
        return '上午';
      } else if (hm < 1230) {
        return '中午';
      } else if (hm < 1800) {
        return '下午';
      } else {
        return '晚上';
      }
    },
    calendar: {
      sameDay: '[今天]LT',
      nextDay: '[明天]LT',
      nextWeek: '[下]ddddLT',
      lastDay: '[昨天]LT',
      lastWeek: '[上]ddddLT',
      sameElse: 'L'
    },
    dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
    ordinal: function(number, period) {
      switch (period) {
        case 'd':
        case 'D':
        case 'DDD':
          return number + '日';
        case 'M':
          return number + '月';
        case 'w':
        case 'W':
          return number + '周';
        default:
          return number;
      }
    },
    relativeTime: {
      future: '%s内',
      past: '%s前',
      s: '几秒',
      ss: '%d秒',
      m: '1分钟',
      mm: '%d分钟',
      h: '1小时',
      hh: '%d小时',
      d: '1天',
      dd: '%d天',
      M: '1个月',
      MM: '%d个月',
      y: '1年',
      yy: '%d年'
    },
    week: {
      // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
      dow: 1, // Monday is the first day of the week.
      doy: 4 // The week that contains Jan 4th is the first week of the year.
    }
  })
  import ruzhang from '../floorRoomSign/ruzhang';
  export default {
    data() {
      return {
        max: false,
        countIndex: 0,
        loading: false,
        addPeopleVisible: false,
        xuzhuTiqianVisible: false,
        closingRoomVisible: false,
        ruzhangVisible: false,
        floorroomruzhuVisible: false,
        scrollFlag: true,
        editable: false,
        allFloorRoom: [{
          hotelRoomEntity: {},
          entityList: [{
            'roomSign': 0,
            'lockType': 0
          }]
        }],
        // 全房间数据
        allroomlist: [],
        limit: 20,
        page: 1,
        // 查询参数
        typeid: '',
        roomid: '',
        rscrollTop: 0,
        lastScrollTop: 0,// 上次滚动的距离
        totalCount: 0, // 查询总数
        peopleRoom: [],
        time: Moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        times: [],
        maxWidth: 0,
        hoverTd: '',
        hoverRoom: '',
        hoverTimeRoom: '',
        hoverRz: '',
        NOW: Moment(new Date()).format('MM/DD'),
        isCountNow: false,
        searchKey: '', //搜索关键字
        restaurants: [], //搜索结果集
        selectedType: '',
        scrollData: [],
        availableDays: [], //可用
        allocated: [],
        availableDaysMap: new Map(), //可用
        allocatedMap: new Map(),
        activePeopleId: 0,
        activeRoomId: 0,
        fangtaiWeixiuVisible: false,
        sourceTypeMaps: [
          '散客',
          '会员',
          '协议单位',
          '中介'
        ],
        backgroundMap: [
          '',
          'background-color: rgb(112, 198, 175);',
          'background-color: rgb(96, 162, 255);',
          'background-color: rgb(164, 164, 164);'
        ]
      }
    },
    components: {
      fangtaiWeixiu,
      addPeople,
      closingRoom,
      ruzhang,
      floorroomruzhu,
      xuzhuTiqian
    },
    activated() {
      // this.getAllFloorRoom();
      this.hoverTd = ''
      this.hoverRoom = ''
      this.hoverTimeRoom = ''
      if (this.hoverRz != '') {
        this.hoverRz.style.display = "none"
      }
      this.getAllFloorRoom()
      this.getRoomList()
      // 查询可视区， 计算显示内容
      // this.createShowAllFloorRoom()
    },
    methods: {
      queryInit(){
        // this.getAllFloorRoom();
        this.hoverTd = ''
        this.hoverRoom = ''
        this.hoverTimeRoom = ''
        if (this.hoverRz != '') {
          this.hoverRz.style.display = "none"
        }
        this.getAllFloorRoom()
      },
      toGULilist(item){
        this.$router.replace({
          name: '客单',
          params:{
            type:2
          }
        });
      },
      getDataList(){
        this.hoverTd = ''
        this.hoverRoom = ''
        this.hoverTimeRoom = ''
        if (this.hoverRz != '') {
          this.hoverRz.style.display = "none"
        }
        this.getAllFloorRoom()
      },
      liveTogetherBtn(item) {
        this.addPeopleVisible = true;
        this.$nextTick(() => {
          this.$refs.addPeople2.init({
            sellerId: item.peopleEntity.sellerId,
            floorRoomId: item.peopleEntity.floorRoomId,
            arrivalsTime: item.peopleEntity.arrivalsTime,
            predissociationTime: item.peopleEntity.predissociationTime,
            // roomPrice: item.roomPrice,
            singleId: item.peopleEntity.singleId,
            sign: item.peopleEntity.sign
          });
        });
      },
      closingRoomBtn(item) {
        this.closingRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.closingRoom.init({
            singleId: item.singleEntity.id,
            floorRoomId: item.peopleEntity.floorRoomId
          });
        });
      },
      xuzhuTiqian(item) {
        console.log(item);
        this.xuzhuTiqianVisible = true;
        this.$nextTick(() => {
          this.$refs.xuzhuTiqian.init({
            id: item.peopleEntity.id,
            predissociationTime: item.peopleEntity.predissociationTime,
            arrivalsTime: item.peopleEntity.arrivalsTime,
            singleId: item.peopleEntity.singleId,
            floorRoomId: item.peopleEntity.floorRoomId,
            roomId: item.hotelFloorRoomEntity.roomId
          });
        });
      },
      // 入账
      ruzhangHandle(item) {
        this.ruzhangVisible = true;
        this.$nextTick(() => {
          this.$refs.ruzhang.init({
            id: item.peopleEntity.id,
            singleId: item.singleEntity.id
          });
        });
      },
      toAccounting(singleId, type) {
        //将数据存储到本地
        var p = {
          singleId: singleId,
          type: type,
        }
        this.$cookie.set("accounting", JSON.stringify(p));
        this.$router.push({
          name: 'accounting'
        })
      },
      // 筛选出可显示的
      createShowAllFloorRoom() {
        if (!this.$refs.roomsTable) {
          return
          // return window.requestAnimationFrame(this.createShowAllFloorRoom)
        }
        let box = 54// td 单元格 行高53
        let scrolltop = this.$refs.roomsTable.scrollTop
        let scrollh = this.$refs.roomsTable.scrollHeight
        // 高度总和
        let rooms = this.allFloorRoom.reduce((sum, item) => {return sum + item.entityList.length}, 0)
        let allh = rooms * box

        let view = allh - scrolltop //可视区最上面的 元素
        let index = rooms - parseInt(view/box) // 总下标

        let xiabiao = 0,
            min = index - 1,
            max = index + 15
        this.allFloorRoom.forEach(item => {
          item.entityList.forEach(o => {
            if (xiabiao >= min && xiabiao <= max) {
              o.checked = true
            } else {
              o.checked = false
            }
            xiabiao++
          })
        })
        // console.log(index,scrolltop);

        // window.requestAnimationFrame(this.createShowAllFloorRoom)
      },
      getRoomList() {
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelRoomForcasting/roomForcastingLists'),
          method: 'get',
        })
          .then(res => {
            this.allroomlist = res.data.allFloorRoom
            this.restaurants = this.getSearchData();
          })
      },
      getAllFloorRoom(isScroll = false) {
        if (isScroll) {
          this.page++
        } else {
          this.page = 1
        }
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelRoomForcasting/roomForcastingList'),
          method: 'get',
          params: this.$http.adornParams({
            'startTime': this.time,
            'endTime': Moment(this.time).add(14, 'days').endOf('day').format('YYYY-MM-DD HH:mm:ss'),
            'isCountNow': this.isCountNow,
            'page': this.page,
            'limit': this.limit,
            'typeid': this.typeid,
            'roomid': this.roomid
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            if (isScroll) {
              // console.log(' this.allFloorRoom', this.allFloorRoom)
              // 遍历得到的数据， 判断
              for (let i in data.allFloorRoom) {
                let item = undefined
                // 查询 后台返回房型是否存在
                if (this.allFloorRoom.length != 0) {
                  item =  this.allFloorRoom.find(o => {
                    return o.hotelRoomEntity.id == data.allFloorRoom[i].hotelRoomEntity.id
                  })
                }
                // console.log('item', item)
                // 存在， 对应房型中添加数据
                if (item != undefined) {
                  item.entityList.push(...data.allFloorRoom[i].entityList)
                  item.hotelRoomEntity = item.hotelRoomEntity
                  item.size = item.size
                } else { // 不存在对应房型 则 追加
                   this.allFloorRoom.push({
                      entityList: [...data.allFloorRoom[i].entityList],
                      hotelRoomEntity: data.allFloorRoom[i].hotelRoomEntity,
                      size: data.allFloorRoom[i].size
                   })
                }
              }
            } else {
              this.allFloorRoom = data.allFloorRoom
            }
            this.countIndex = 0
            this.allFloorRoom.forEach(item => {
              item.entityList.forEach(o => {
                o.checked = false;
                this.countIndex = this.countIndex+1
              })
            })
            this.createShowAllFloorRoom()

            this.totalCount = data.totalCount

            // this.allFloorRoom = data.allFloorRoom
            this.peopleRoom = data.peopleRoom
            console.log("数据：", this.peopleRoom)
            console.log('getAllFloorRoom',this.roomid ,'roomid', this.typeid, data, this.allFloorRoom)
            this.getDays();
            this.getScrollData();
          } else {
            this.allFloorRoom = []
          }
          this.loading = false;
        })
      },
      setType(type) {
        if (type == 1) {
          this.scrollFlag = true
        }
        if (type == 2) {
          this.scrollFlag = false
        }
      },
      scrollRooms() {


        if (this.scrollFlag) {
          var scrollTop = this.$refs.roomsTable.scrollTop;
          this.$refs.rightWrap.scrollTop = scrollTop;
          // var rooms = document.querySelectorAll(".futrue_room_status")
          var rooms = 0
          var room = Math.floor(scrollTop / 54)
          // var temp = rooms[room].parentNode.previousElementSibling
          for (let i = 0; i < this.allFloorRoom.length; i++) {
            rooms += this.allFloorRoom[i].entityList.length
          }
          // console.log(rooms, 'rooms');
          for (const item of this.allFloorRoom) {
            if (room > item.entityList.length) {
              room -= item.length
            } else {
              room = item
              break ;
            }
          }
          // console.log('left',room, );
          var rowspan = room.entityList.length
          var datatype = room.hotelRoomEntity.name
          var fixed_room_type = document.getElementById("fixed_room_type")
          fixed_room_type.innerHTML = datatype + '(' + rowspan + ')'
          // if (temp != null) {
          //   console.log('设置头信息')
          //   var rowspan = temp.getAttribute("rowspan")
          //   var datatype = temp.getAttribute("data-type")
          //   var fixed_room_type = document.getElementById("fixed_room_type")
          //   fixed_room_type.innerHTML = datatype + '(' + rowspan + ')'
          // }
        }


      },
      scrollRight(event) {
        //
        this.$nextTick(() => {
          this.createShowAllFloorRoom()
        })
        // console.log('event', event);
        // 距离顶部的距离
        let rscrollTop = event.target.scrollTop;

        let scrollHeight  = event.target.scrollHeight
        let boxHeight =  event.target.clientHeight
        let distence = scrollHeight - rscrollTop - boxHeight
        let length2 = 0
        this.allFloorRoom.forEach(item => {
          length2 += item.entityList.length
        })
        // 数组长度不能大于总条数    // 向上滚动不执行
        if (distence < 50 && length2 < this.totalCount && !this.loading && rscrollTop > this.lastScrollTop ) {
          this.getAllFloorRoom(true)
        }
        // 保存本次滚动的值
        this.lastScrollTop = rscrollTop


        // if (distence < 50 && !this.roomLoading && this.dataList.length < this.totalCount) {
        //   this.getAllFloorRoom()
        // }


        var scrollLeft = this.$refs.rightWrap.scrollLeft;
        this.$refs.topTableWrap.scrollLeft = scrollLeft

        if (!this.scrollFlag) {
          var scrollTop = this.$refs.rightWrap.scrollTop;
          this.$refs.roomsTable.scrollTop = scrollTop;
          var rooms = document.querySelectorAll(".futrue_room_status")
          var room = Math.floor(scrollTop / 54)
          var temp = rooms[room].parentNode.previousElementSibling
          if (temp != null) {
            console.log('设置头信息')
            var rowspan = temp.getAttribute("rowspan")
            var datatype = temp.getAttribute("data-type")
            var fixed_room_type = document.getElementById("fixed_room_type")
            fixed_room_type.innerHTML = datatype + '(' + rowspan + ')'
          }
        }
      },
      timeWidth(startTime, endTime) {
        // 不包含当日预离房费
        if (this.isCountNow) {
          let end =  new Date(endTime)
          let time1 = end.getTime() - 3600000 * end.getHours() - end.getMinutes() * 60000
          endTime = Moment(time1).format('YYYY-MM-DD HH:mm')
        }
        if (Moment(startTime).isBefore(Moment(this.time).format('YYYY-MM-DD HH:mm'))) {
          console.log(Moment(endTime));
          return (Moment(endTime).diff(Moment(this.time), 'seconds') / 86400 * 120).toFixed(2)
        }
        return (Moment(endTime).diff(Moment(startTime), 'seconds') / 86400 * 120).toFixed(2)
      },
      startTimeWidth(startTime, endTime) {
        if (!Moment(startTime).isBefore(Moment(this.time).format('YYYY-MM-DD HH:mm'))) {
          return (Moment(startTime).diff(Moment(this.time), 'seconds') / 86400 * 120).toFixed(2)
        }
        return 0
      },
      async getDays() {
        console.log(this.time)
        this.maxWidth = 15 * 120
        this.times = []
        this.availableDays = []
        this.allocated = []
        var now = Moment(new Date()).format('MM/DD');
          this.searchAvailable(this.time);
        for (var i = 0; i < 15; i++) {
          var temp = Moment(this.time).add(i, 'days');
          var time1 = Moment(temp).format('MM/DD');
          var time2 = Moment(temp).format('MM/DD dddd')
          var time3 = Moment(temp).format('YYYY-MM-DD HH:mm:ss')
          var bg = this.timeCompare(time3)
          var color = '';
          if (time1 == now) {
            color = 'color:red;';
          }
          let count = 0;
          console.log(Moment(time3).format('YYYY-MM-DD') >= Moment().format('YYYY-MM-DD'))
          if (Moment(time3).format('YYYY-MM-DD') >= Moment().format('YYYY-MM-DD')) {
            var end = Moment(time3).endOf('day').format('YYYY-MM-DD HH:mm:ss');

          } else {
            this.availableDaysMap.set(i, 0)
            this.allocatedMap.set(i, 0)
          }
          this.times.push({
            'time1': time1,
            'time2': time2,
            'time3': time3,
            'bg': bg,
            'color': color,
            'count': i
          })
        }
        console.log("getDays", this.availableDaysMap, this.allocatedMap)

      },
      timeCompare(compareTime) {
        var start1 = Moment(compareTime).startOf('day').format('YYYY-MM-DD HH:mm:ss')
        var end1 = Moment(compareTime).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        let flag = '';
        //startdate1 <=enddate2 and enddate1>=startdate2
        this.peopleRoom.forEach(item => {
          if (start1 <= item.singleEntity.predissociationTime && end1 >= item.singleEntity.arrivalsTime) {
            flag = 'rgb(227, 246, 255);'
            return
          }
        })
        return flag
      },
      searchAvailable(time) {
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelRoomForcasting/searchAvailable'),
          method: 'get',
          params: this.$http.adornParams({
            'time':time,
            'isCountNow': this.isCountNow
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            for(var i=0;i<data.count.length;i++){
              this.availableDaysMap.set(data.count[i].i, data.count[i].cs)
              this.allocatedMap.set(data.count[i].i, data.count[i].co)
            }

            this.$forceUpdate();
          } else {}
        })
      },
      bg_hover(event, room, date) {
        this.hoverTd = date
        this.hoverRoom = room
        event.target.style.zIndex = 4

        var x = 70;
        var y = 50;
        var data = window.getComputedStyle(event.target.querySelector('.empty_room_operate'))
        if (event.clientX > document.body.offsetWidth / 2) {
          x = -70;
        }
        if (event.clientY > document.body.offsetHeight / 2) {
          y = -50
        }

        event.target.querySelector('.empty_room_operate').style.top = y + "%"
        event.target.querySelector('.empty_room_operate').style.left = x + "%"
        this.hoverRz = event.target.querySelector(".empty_room_operate");
        event.target.querySelector(".empty_room_operate").style.display = "block"


      },
      bg_hover_out(event) {
        this.hoverTd = '',
          this.hoverRoom = ''
        event.target.style.zIndex = 2
        event.target.querySelector(".empty_room_operate").style.display = "none"
      },
      getSearchData() {
        var list = []
        // this.allFloorRoom.forEach(item => {
        //   var temp = {
        //     "value": item.hotelRoomEntity.name,
        //     "type": 'type',
        //   }
        //   list.push(temp)
        //   item.entityList.forEach(item2 => {
        //     var temp2 = {
        //       "value": item2.roomSign + item2.roomNum,
        //       "type": 'room'
        //     }
        //     list.push(temp2)
        //   })
        // })
        list.push({type: 'all',value: '全部'})
        this.allroomlist.forEach(item => {
          let hotelroom = item.hotelRoomEntity
          list.push({type: 'type', value: hotelroom.name, id: hotelroom.id})
          item.hotelRoomEntity.entityList.forEach(o => {
            list.push({type: 'room', value: o.roomSignNum, id: o.id})
          })
        })
        return list;
      },
      handleSelect(item) {
        console.log(item)
        if (item.type == 'type') {
          // var dom = document.querySelector('[data-type=' + item.value + ']');
          this.selectedType = item.value
          this.typeid = item.id
          this.roomid = ''
          // dom.scrollIntoView();
          this.getAllFloorRoom()
        }
        if (item.type == 'room') {
          // var dom = document.querySelector('[data-room=' + item.value + ']');
          this.selectedType = item.value
          this.roomid = item.id
          this.typeid = ''
          // dom.scrollIntoView();
          this.getAllFloorRoom()
        }
        if (item.type == 'all') {
          this.roomid = this.typeid = ''
          this.getAllFloorRoom()
        }
        var scrollTop = this.$refs.roomsTable.scrollTop;
        this.scrollData.forEach(item => {
          if (item.min < scrollTop && item.max > scrollTop) {
            var fixed_room_type = document.getElementById("fixed_room_type")
            fixed_room_type.innerHTML = item.name + '(' + item.length + ')'
          }
        })
      },

      keyChange() {
        if (this.searchKey == "") {
          this.selectedType = ""
        }

      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        // console.log('restaurants', this.restaurants)
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        //  id roomId
        // var results = []
        // results.push({type: 'all',value: '全部'})
        // this.allroomlist.forEach(item => {
        //   let hotelroom = item.hotelRoomEntity
        //   results.push({type: 'type', value: hotelroom.name, id: hotelroom.id})
        //   item.hotelRoomEntity.entityList.forEach(o => {
        //     results.push({type: 'room', value: o.roomSignNum, id: o.id})
        //   })
        // })
        // 调用 callback 返回建议列表的数据
        // console.log('results',results)
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      getScrollData() {
        var top = 0;
        this.scrollData = []
        this.allFloorRoom.forEach(item => {
          this.scrollData.push({
            'name': item.hotelRoomEntity.name,
            'length': item.entityList.length,
            'min': top,
            'max': 54 * item.entityList.length
          })
          top = 54 * item.entityList.length
        })
      },
      activePeople(pid, e) {
        this.activePeopleId = pid
        if (pid != 0) {
          e.target.style.zIndex = 99
          var x = e.clientX;
          var y = e.clientY;
          var data = window.getComputedStyle(e.target.querySelector('.order_operate'))
          console.log(data.width)
          if (e.clientX > document.body.offsetWidth / 2) {
            x = e.clientX - 300;
          }
          if (e.clientY > document.body.offsetHeight / 2) {
            y = e.clientY - parseInt(data.height.replace('px', ''))
          }
          e.target.querySelector('.order_operate').style.top = y + "px"
          e.target.querySelector('.order_operate').style.left = x + "px"
        } else {
          e.target.style.zIndex = 3
        }
      },
      activeRoom(rid, e) {
        this.activeRoomId = rid
        if (rid != 0) {

          var data = e.target.getBoundingClientRect()

          e.target.querySelector('.empty_room_operate').style.top = data.top + 10 + "px"
          e.target.querySelector('.empty_room_operate').style.left = data.left + 90 + "px"
        }
      },
      setClear(sign, id, type) {

        if (sign == 'zang') {
          //空房置脏
          if (type == 0) {
            type = 1;
          }
          //住房置脏
          if (type == 2) {
            type = 3;
          }
        }
        if (sign == 'ganjing') {
          //空房置脏
          if (type == 1) {
            type = 0;
          }
          //住房置脏
          if (type == 3) {
            type = 2;
          }
        }
        if (sign == 'weixiu') {
          type = 1;
        }
        //发送请求
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroom/state`),
          method: 'post',
          data: this.$http.adornData({
            id: id,
            type: type
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getAllFloorRoom();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      //锁房
      open(id, type) {
        this.$prompt('锁房原因', '锁房', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            inputErrorMessage: '原因不能为空'
          })
          .then(({
            value
          }) => {
            //发送请求
            this.$http({
              url: this.$http.adornUrl(`/hotel/thotelfloorroom/state`),
              method: 'post',
              data: this.$http.adornData({
                id: id,
                lockType: 0,
                type: type,
                desc: value
              })
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getAllFloorRoom();
                  }
                });
                this.getDataList();
              } else {
                this.$message.error(data.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });
      },
      unlock(id, type) {
        //发送请求
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroom/state`),
          method: 'post',
          data: this.$http.adornData({
            id: id,
            type: type,
            lockType: 1
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getAllFloorRoom();
              }
            });
            item.lockType = 1;
            item.checked = false;
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      weixiuBtn(item) {
        this.fangtaiWeixiuVisible = true;
        this.$nextTick(() => {
          this.$refs.fangtaiWeixiu.init(item);
        });
      },
      ruzhu(list) {
        // console.log(list)
        // //将数据存储到本地
        list.map(item=>({
          ...item,
          peoples: []
        }))
        // this.$cookie.set("ruzhuRoom", JSON.stringify(list));
        // this.$router.push({
        //   name: 'ruzhu'
        // })
        // this.floorroomruzhuVisible = true;
        // this.$nextTick(() => {
        //   this.$refs.floorroomruzhu.init(item);
        // });

        console.log(list);
        //将数据存储到本地
        this.$cookie.set("ruzhuRoom", JSON.stringify(list));
        // this.$router.push({
        //   name: 'ruzhu'
        // })
        this.floorroomruzhuVisible = true;
        this.$nextTick(() => {
          this.$refs.floorroomruzhu.init(list);
        });
      },
      reserve(list) {
        //将数据存储到本地
        this.$cookie.set("reserveRoom", JSON.stringify(list));
        this.$router.push({
          name: 'reserve'
        })
        // this.floorroomruzhuVisible = true;
        // this.$nextTick(() => {
        //   this.$refs.floorroomruzhu.init(item);
        // });
      },
    },
    mounted() {
      // this.getAllFloorRoom();
      // 查询可视区， 计算显示内容
      // this.createShowAllFloorRoom()
      this.getRoomList()
    }
  }
</script>
<style lang="scss" scoped>
  /*远期房态*/
  .ant-layout {
    display: flex;
    flex: auto;
    flex-direction: column;
    min-height: 0;
    background: #d9e5ec;
  }

  .future_wrap {
    left: 0;
    top: 60px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: rgb(240, 240, 240);
    transition: top 0.8s ease;
  }

  .future_handle_area {
    height: 60px;
    padding: 0 0px;
    background-color: #fff;
    line-height: 60px;
  }

  .future_room_status {
	  position: absolute;
    top: 110px;
    left: 7px;
    right: 25px;
    bottom: 77px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
  }

  .future_room_status table {
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: auto;
  }

  .ant-divider {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #002140;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: "tnum", "tnum";
    font-feature-settings: "tnum", "tnum";
    background: #e8e8e8;
  }

  .future_room_status table tr td {
    border: 1px solid #ddd;
    box-sizing: border-box;
    table-layout: fixed;
  }

  .future_room_status .left_wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 190px;
  }

  .future_room_status .right_wrap {
    position: relative;
    padding-left: 190px;
    height: 100%;
  }

  .left_wrap .time_choice {
    position: relative;
    height: 90px;
    z-index: 10;
    background-color: #fff;
    border: 1px solid rgb(221, 221, 221);
    text-align: center;
    line-height: 90px;
    border-radius: 5px 0 0 0;
  }

  .left_table_wrap {
    position: absolute;
    top: 90px;
    bottom: 0;
    width: 100%;
    z-index: 2;
    overflow-y: auto;
    overflow-x: scroll;
  }

  .left_table_wrap table {
    width: 100%;
    table-layout: fixed;
    color: #333;
    font-size: 14px;
  }

  .left_table_wrap table tr td {
    position: relative;
    height: 54px;
    text-align: center;
  }

  .left_table_wrap table tr td[data-room] {
    cursor: pointer;
  }

  .left_table_wrap table tr td.selected {
    background: #ffffa8;
    animation: flash-background 0.3s ease-in 5;
  }

  .right_wrap .top_table_wrap {
    height: 90px;
    overflow-x: hidden;
  }

  .top_table_wrap table tr td {
    position: relative;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    height: 89px;
    text-align: center;
    font-size: 12px;
    color: #000;
    background-color: #f5f5f5;
    vertical-align: top;
    padding-top: 17px;
  }

  .top_table_wrap a {
    font-size: 12px;
  }

  .right_wrap .right_table_wrap {
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 190px;
    right: 0;
    z-index: 1;
    overflow: auto;
  }

  .right_table_wrap table tr td {
    position: relative;
    height: 54px;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }

  .right_table_wrap table tr td::before {
    content: "";
    position: absolute;
    background: #ddd;
    width: 1px;
    height: 12px;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    z-index: 1;
  }

  .right_table_wrap .empty_room {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
    cursor: pointer;
  }

  table tr td:last-child .empty_room {
    width: 50%;
  }

  .ant-divider-horizontal {
    display: block;
    clear: both;
    width: 100%;
    min-width: 100%;
    height: 1px;
    margin: 24px 0;
  }

  .right_table_wrap .empty_room:hover,
  .left_table_wrap table tr td[data-room]:hover,
  .empty_room_operate div:hover {
    background-color: rgba(255, 230, 228, 0.7);
  }

  .right_table_wrap .room_order {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 3;
    cursor: pointer;
  }

  .time_choice .operate_date {
    cursor: pointer;
    display: inline-block;
    height: 30px;
    line-height: 35px;
    padding: 0 5px;
  }

  .time_choice .operate_date:hover {
    background-color: #ddd;
  }

  .bg_hover {
    background-color: rgba(255, 230, 228, 0.7) !important;
  }

  .occupy_operate_wrap {
    margin-top: 5px;
    background-color: rgb(240, 240, 240);
    border-top: 1px solid #e8e8e8;
    text-align: center;
  }

  .occupy_operate_wrap .operate_btn {
    position: relative;
    display: block;
    margin: 12px 0;
    color: #666;
  }

  .occupy_operate_wrap .ant-col-8:nth-child(4) .operate_btn::before {
    position: absolute;
    left: 0;
    top: -12px;
    content: "";
    width: 300%;
    height: 0;
    border-top: 1px solid #e8e8e8;
  }

  .occupy_operate_wrap .ant-col-8:not(:nth-child(3n + 1)) .operate_btn::before {
    position: absolute;
    left: 0;
    top: 3px;
    content: "";
    height: 14px;
    width: 1px;
    background-color: #ccc;
  }

  .occupy_operate_wrap .operate_btn:hover {
    color: #f24e4c;
  }

  .empty_room_operate {
    position: fixed;
    left: -9999px;
    padding: 10px 0;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 0 5px #ccc;
    border-radius: 3px;
  }

  .empty_room_operate.right_bottom {
    position: absolute;
    left: 70%;
    top: 50%;
  }

  .empty_room_operate.left_bottom {
    position: absolute;
    left: auto;
    right: 70%;
    top: 50%;
    bottom: auto;
  }

  .empty_room_operate.right_top {
    position: absolute;
    left: 70%;
    top: auto;
    bottom: 50%;
    right: auto;
  }

  .empty_room_operate.left_top {
    position: absolute;
    left: auto;
    top: auto;
    right: 70%;
    bottom: 50%;
  }

  .empty_room_operate div {
    line-height: 2;
    padding: 0 15px;
    white-space: nowrap;
  }

  .futrue_room_status {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    color: #fff;
    overflow: hidden;
  }

  .futrue_room_status::before {
    content: "";
    position: absolute;
    height: 30px;
    width: 60px;
    left: -6px;
    top: -12px;
    z-index: 1;
    transform: rotateZ(45deg);
  }

  .futrue_room_status.futrue_dirty::before {
    background-color: #000;
  }

  .futrue_room_status.futrue_locked::before {
    background-color: #f24e4c;
  }

  .futrue_room_status.futrue_repair::before {
    background-color: #a4a4a4;
  }

  .futrue_room_status i {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    font-size: 10px;
  }

  .order_operate {
    position: fixed;
    z-index: 999;
    width: 300px;
    box-shadow: 0 0 5px #ccc;
    overflow: hidden;
    border-radius: 3px;
    background-color: #fff;
    height: auto;
  }

  .future_order_info {
    padding: 10px 10px 0;
    color: #666;
  }

  .future_order_info>div {
    overflow: hidden;
    padding: 0 5px;
    line-height: 2;
  }

  .future_order_info .ant-divider {
    margin: 5px 0;
  }

  .future_order_info .name {
    float: left;
    margin-right: 10px;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .future_order_info .mobile {
    float: left;
  }

  .future_order_icon {
    float: right;
    max-width: 74px;
  }

  .future_order_icon i:nth-child(n + 5) {
    margin-top: 5px;
  }

  .futrue_maintain {
    padding: 0 15px;
    font-size: 12px;
    line-height: 53px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .futrue_order {
    padding: 4px 15px;
    color: #fff;
  }

  .futrue_order>div {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
  }

  .futrue_order>div:first-child {
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .futrue_time_rent {
    padding: 4px 0;
    text-align: center;
  }

  .certain-category-search {
    margin-right: 15px;
  }

  .future_order_des {
    display: inline-block;
    margin-right: 15px;
  }

  .future_order_des span {
    display: inline-block;
    margin-left: 10px;
  }

  .future_order_des span em {
    display: inline-block;
    margin-right: 8px;
    width: 25px;
    height: 8px;
  }

  @keyframes flash-background {
    50% {
      background: #fff;
    }
  }

  .right_table_wrap::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }

  .top_table_wrap::-webkit-scrollbar,
  .right_table_wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .left_table_wrap::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .g_icon {
    position: absolute;
    color: #f24e4c;
    bottom: 2px;
    right: 1px;
    line-height: normal;
    border-bottom-right-radius: 4px;
    overflow: hidden;
  }

  .float_box_max {
    font-size: 16px;
    color: #fff;
    width: 145px;
    height: 100px;
    margin-left: 6px;
    float: left;
    position: relative;
    margin-bottom: 6px;
    box-sizing: border-box;
  }

  .float_box_big_small,
  .float_box_small {
    color: #fff;
    height: 80px;
    margin-left: 6px;
    float: left;
    position: relative;
    margin-bottom: 6px;
    box-sizing: border-box;
    cursor: pointer;
  }

  .float_box_small {
    font-size: 12px;
    width: 105px;
  }

  .float_box_big_middle {
    font-size: 15px;
    width: 135px;
  }

  .float_box_big_middle,
  .float_box_middle {
    color: #fff;
    height: 90px;
    margin-left: 6px;
    float: left;
    position: relative;
    margin-bottom: 6px;
    box-sizing: border-box;
  }

  .float_box_big_middle,
  .float_box_middle {
    color: #fff;
    height: 90px;
    margin-left: 6px;
    float: left;
    position: relative;
    margin-bottom: 6px;
    box-sizing: border-box;
  }

  .float_box_middle {
    font-size: 14px;
    width: 125px;
  }

  .float_box_big_small {
    font-size: 13px;
    width: 115px;
  }

  .float_box_content,
  .post_mark {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .float_box_content {
    padding: 5px;
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
  }

  .float_box_content .f_col {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 12px;
  }

  .room_number_default {
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
  }

  .room_type {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  .icon_group {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    position: absolute;
    left: 0;
    bottom: 5px;
  }

  .left_group {
    float: left;
    font-size: 12px;
  }

  .icon_circle {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    text-align: center;
    line-height: 16px;
    color: #fff;
    font-size: 12px;
    font-style: inherit;
  }
  .icon_circle i{
    font-size: 12px;
  }

  .left_group>.icon_circle:last-of-type {
    margin-right: 0;
  }

  .icon_circle+.icon_circle {
    margin-left: 3px;
  }

  .post_mark {
    position: relative;
    overflow: hidden;
  }

  .float_box_content,
  .post_mark {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .post_mark_circle_default {
    width: 41px;
    height: 41px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid hsla(0, 0%, 100%, 0.3);
    margin-top: -16px;
    position: relative;
    float: right;
    margin-right: 16px;
  }

  .post_mark_font_default {
    color: hsla(0, 0%, 100%, 0.5);
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .select_cell {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    background: hsla(0, 0%, 40%, 0.5);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .select_gou_icon,
  .select_lock_icon_default {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #f24e4c;
    font-size: 18px;
    position: absolute;
    border-radius: 50%;
    background: #fff;
    left: calc((100% - 30px) / 2);
    top: calc((100% - 38px) / 2);
  }

  .ant-layout-sider .row_dl.real_time:first-of-type {
    padding: 15px 0 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  }

  .ant-layout-sider .row_dl.real_time {
    padding: 10px 0 5px;
  }

  .row_dl.real_time dd {
    width: 195px;
    margin: 0 auto;
  }

  .ant-input-affix-wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #002140;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: "tnum", "tnum";
    font-feature-settings: "tnum", "tnum";
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: start;
  }

  .row_dl.real_time dt {
    width: 195px;
    margin: 0 auto 10px;
    line-height: 28px;
  }

  .bold {
    font-weight: 700;
  }

  .row_dl.real_time dd .all>.select_tag:nth-of-type(odd),
  .row_dl.real_time dd .filter>.select_tag:nth-of-type(odd) {
    margin-left: 0;
  }

  .row_dl.real_time .select_tag {
    float: left;
    width: 95px;
    padding: 0 1px 0 5px;
    margin: 0 1px 5px;
  }

  .select_tag {
    position: relative;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
  }

  .select_tag .color_rect {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  .select_tag span {
    display: inline-block;
  }

  .select_tag span+span {
    margin-left: 5px;
  }

  .row_dl.real_time dd .all>.select_tag:nth-of-type(odd),
  .row_dl.real_time dd .filter>.select_tag:nth-of-type(odd) {
    margin-left: 0;
  }

  .row_dl.real_time .select_tag.selected {
    overflow: hidden;
  }

  .row_dl.real_time .select_tag {
    float: left;
    width: 95px;
    padding: 0 1px 0 5px;
    margin: 0 1px 5px;
  }

  .select_tag.selected,
  .select_tag.selected:hover {
    color: #000;
    background: #fff !important;
    border: 1px solid #f24e4c;
  }

  .FloorBreak {
    clear: both;
  }

  .empty_clean {
    cursor: pointer;
  }

  .el-button--xsmini,
  .el-button--xsmini.is-round {
    padding: 3px 10px;
    font-size: 12px;
  }

  .contextmenu_div {
    display: table;
    color: rgba(0, 0, 0, 0.65);
    z-index: 20;
    font-size: 12px;
    box-shadow: 2px 2px 10px -1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }

  .left_div {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: table-cell;
    background: #fff;
  }

  .left_ul {
    width: 115px;
    padding-left: 0;
    margin-top: 0px;
  }

  .left_common_li {
    cursor: pointer;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  }

  .left_common_div {
    padding: 5px 10px;
  }

  .left_ul>li:last-of-type,
  .right_ul>li:last-of-type {
    border-bottom: none;
  }

  .fangtai ol,
  ul {
    list-style: none;
  }

  .fangtai .ant-layout,
  .ant-layout * {
    box-sizing: border-box;
  }

  .left_common_div:hover {
    background: #17b3a3;
    color: white;
  }

  .fangtai dl,
  ul {
    margin-bottom: 0;
  }

  .right_div {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    display: table-cell;
    background: #f0f2f5;
    vertical-align: top;
  }

  .right_ul {
    width: 220px;
    padding-left: 0px;
    margin-top: 0px;
  }

  .left_ul>li:last-of-type,
  .right_ul>li:last-of-type {
    border-bottom: none;
  }

  .right_common_li {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  }

  .flexBox.oneColumn {
    flex-direction: column;
  }

  .flexBox,
  .flexBox>div {
    display: flex;
    align-items: center;
  }

  .flexBox {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .flexBox.oneColumn>div {
    width: 100%;
  }

  .flexBox.auto>div,
  .flexBox.fourColumn>div,
  .flexBox.oneColumn>div,
  .flexBox.threeColumn>div,
  .flexBox.twoColumn>div {
    margin-right: 0;
  }

  .flexBox>div {
    padding: 5px 0;
    margin-right: 10px;
  }

  .flexBox,
  .flexBox>div {
    display: flex;
    align-items: center;
  }

  .flexBox.oneColumn>div {
    width: 100%;
  }

  .right_ul .flexBox.oneColumn>div>label {
    color: rgba(0, 0, 0, 0.65);
    margin-right: 0;
  }

  .flexBox>div>label.fourChar {
    width: 60px;
    margin-right: 5px;
  }

  .flexBox>div>label {
    color: rgba(0, 0, 0, 0.85);
    min-width: 45px;
  }

  .icon_circle {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #000;
    text-align: center;
    line-height: 16px;
    color: #fff;
    font-size: 12px;
  }

  .icon_circle i {
    font-style: inherit !important;
  }

  .left_group>.icon_circle:last-of-type {
    margin-right: 0;
  }

  .red_bg1 {
    background: #f24e4c !important;
  }

  .icon_circle+.icon_circle {
    margin-left: 3px;
  }

  .icon_circle_status {
    background: #fed80a;
    color: #666;
    margin-left: 3px;
    padding: 0 2px;
    width: auto;
  }

  .post_mark {
    position: relative;
    overflow: hidden;
  }

  .float_box_content,
  .post_mark {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .select_gou_icon,
  .select_lock_icon_default {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #f24e4c;
    font-size: 18px;
    position: absolute;
    border-radius: 50%;
    background: #fff;
  }

  .select_lock_icon_default {
    right: -8px;
    top: -7px;
    left: auto;
  }

  /* switch按钮样式 */
  .switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
  }

  /*打开时文字位置设置*/
  .switch .el-switch__label--right {
    z-index: 1;
  }

  /* 调整打开时文字的显示位子 */
  .switch .el-switch__label--right span {
    margin-right: 9px;
  }

  /*关闭时文字位置设置*/
  .switch .el-switch__label--left {
    z-index: 1;
  }

  /* 调整关闭时文字的显示位子 */
  .switch .el-switch__label--left span {
    margin-left: 9px;
  }

  /*显示文字*/
  .switch .el-switch__label.is-active {
    display: block;
  }

  /* 调整按钮的宽度 */
  .switch.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 58px !important;
    padding: 0 6px;
    padding-left: 10px;
    margin: 0;
  }

  .ant-col-8 {
    display: inline-table;
    width: 30%;
  }

  .operate_btn {
    position: relative;
    display: block;
    margin: 8px 0 !important;
    color: #666;
  }
</style>
